<template>
	<!-- #ifdef H5 -->
	<!-- 底部 -->
		<view class="footer-body mt-100 p-60">
				<view class="main">
						<view class="wid box">
							<view class="nav-box">
								<view class="item" v-for="(item,index) in footerNav" :key="index">
									<view class="list xin-flex flex-btn" @click="toogle(index)">
										<view class="label">{{item.name}}</view>
										<view class="iconfont" :class="item.flag ? 'iconjianhaocu' : 'iconjiahao'" ></view>
									</view>
									<template v-if="item.flag">
										<view class="sub-nav animated fadeInDown" >
											<text class="m-10" v-for="(ele,key) in item.children" :key="key">{{ele}}</text>
										</view>
									</template>
								</view>
							</view>
							<view class="pover-by mt-40 text-center">
								<a href="https://beian.miit.gov.cn/" target="_blank">{{beian}} {{copyright}}</a>
							</view>
						</view>
				</view>
		</view>
		<!-- #endif -->
</template>
<script>
	export default{
		data(){
			return{
				footerNav:[
					{name:'帮助文档',children:['技术支持','文档下载','文档列表']},
					{name:'产品展示',children:['最新商品','精选商品','秒杀商品']},
					{name:'联系我们',children:['官方电话','公司地址','在线客服']},
				],
				beian:'沪ICP备1934545号',
				copyright:'2020申蓝湃版权所有'
			}
		},
		methods:{
			toogle(index){
				this.footerNav.forEach((item,key)=>{
					if(key!=index){
						item.flag = false
					}
				})
				this.footerNav[index].flag = !this.footerNav[index].flag
					this.$forceUpdate()
			},
		}
	}
</script>

<style lang="scss">
	.footer-body{
		background: #4d4d4d;
		color: #fff;
		font-size: 26rpx;
		a{
			color: #ffffff;
			font-size: 26rpx;
			text-decoration: none;
		}
		.nav-box{
			.item{
				.list{
					line-height: 80rpx;
					.iconfont{
						font-size: 26rpx;
					}
				}
				.sub-nav{
					text{
						display: block;
						opacity: .6;
						padding: 20rpx 0;
						padding-left: 60rpx;
					}
				}
			}
		}
	}
</style>

